import React, { useEffect, useState } from "react";
import {
  Button,
  Form,
  Input,
  Table,
  message,
  Popconfirm,
  Modal,
  DatePicker,
  Select,
  InputNumber,
} from "antd";
import dayjs from "dayjs";
import "../user/user.css";
import { getUser, addUser, editUser, deleteUser } from "../../api/index";
const User = () => {
  //搜索框的内容
  const [listData, setListData] = useState({ name: "" });
  useEffect(() => {
    getTableData();
  }, [listData]);
  //table的数据
  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
    },
    {
      title: "性别",
      dataIndex: "sex",
      render: (val) => {
        return val ? "女" : "男";
      }, //这里通过render渲染男（0）还是女（1）
    },
    {
      title: "出生日期",
      dataIndex: "birth",
    },
    {
      title: "地址",
      dataIndex: "addr",
    },
    {
      title: "操作",
      render: (rowData) => {
        return (
          <div>
            <Button style={{ marginRight: "10px" }} type="primary"onClick={() => handleClick("edit", rowData)}>编辑</Button>
            {/* 因为编辑不仅弹窗显示编辑用户，还要有本来的数据，所以要传参数rowData */}
            <Popconfirm
              title="删除该栏"
              description="你确定要删除吗?"
              onConfirm={() => handleDelate(rowData)}
              onCancel={cancel}
              okText="确定"
              cancelText="取消"
            >
              <Button type="primary" danger>
                删除
              </Button>
            </Popconfirm>
          </div>
        );
      },
    },
  ];
  //表格数据
  const [tableData, setTableData] = useState([]);
  //响应式变量必须这么写，并且有钩子函数只能写在函数组件中
  //新增：0  编辑：1
  const [modelType, setModelType] = useState(0);
  //控制弹窗是否弹出
  const [isModalOpen, setModalOpen] = useState(false);
  //创建form实例。因为再次弹出弹窗里要清空内容。
  const [form] = Form.useForm();
  // console.log(form)
  //搜索
  const handleFinish = (e) => {
    setListData({ name: e.keyword });
    // getTableData();//直接发请求要点两下才行
  };
  const cancel = (e) => {
    // console.log(e);
    message.error("取消删除");
  };
  //点击弹窗的确定按钮
  const handleOk = () => {
    //表单校验，调用这个方法返回的也是一个Promise。成功时返回的就是填写的数据
    form
      .validateFields()
      .then((val) => {
        // 需要通过dayjs将前端传到后端的日期格式做转换
        val.birth = dayjs(val.birth).format("YYYY-MM-DD");
        // console.log(val)
        if (!modelType) {
          //新增
          addUser(val).then(() => {
            handleCancel(); //关闭弹窗
            getTableData(); //再次获取列表数据
          });
        } else {
          //编辑，要先把新的数据传给后端
          editUser(val).then(() => {
            // console.log(val)//新的数据
            handleCancel(); //关闭弹窗
            getTableData(); //再次获取列表数据
            console.log("编辑");
          });
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  //打开弹窗
  const handleClick = (type, rowData) => {
    console.log("rowData", rowData);
    //rowData就是一行的数据
    setModalOpen(!isModalOpen);
    if (type == "add") {
      setModelType(0);
    } else {
      //编辑
      setModelType(1);
      const cloneData = JSON.parse(JSON.stringify(rowData)); //深拷贝
      cloneData.birth = dayjs(cloneData.birth); //格式转换
      form.setFieldsValue(cloneData); //把复制的数据放到表单中
      console.log("cloneData", cloneData);
    }
  };
  //关闭弹窗
  const handleCancel = () => {
    setModalOpen(false);
    form.resetFields(); //清空表单数据
  };
  //表格删除气泡的确定按钮
  const handleDelate = ({ id }) => {
    deleteUser({ id }).then(() => {
      getTableData();
    });
    message.success("删除成功");
  };
  //获取表格数据
  const getTableData = () => {
    //listData就是搜索框的内容，是一个键为name的键值对，在后端中可有可无。有的时候就是搜索，没有的时候就是获取列表
    getUser(listData).then(({ data }) => {
      //{ data }是返回的Promise解构出来的
      setTableData(data.list);
    });
  };
  return (
    <div className="user">
      <div className="flex-box">
        <Button type="primary" onClick={() => handleClick("add")}>
          +新增
        </Button>
        <Form layout="inline" onFinish={handleFinish}>
          {/* onFinish是 Form组件中的一个属性，用来获取表单input框内容*/}
          <Form.Item name="keyword">
            <Input placeholder="请输入用户名"></Input>
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit" type="primary">
              搜索
            </Button>
          </Form.Item>
        </Form>
      </div>
      <Table columns={columns} dataSource={tableData} rowKey={"id"} />;
      {/* rowKey是关键字 */}
      <Modal
        title={modelType ? "编辑用户" : "新增用户"}
        //   这里表示modelType有值，则为true，就是编辑用户
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确定"
        cancelText="取消"
      >
        <Form
          form={form}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          labelAlign="left"
        >
          {/* 编辑时需要把数据传给后端，所以需要带一个唯一标识id */}
          {modelType == 1 && (
            <Form.Item name="id" hidden>
              <Input></Input>
            </Form.Item>
          )}

          {/* label就是表单标签。name就是属性，要和后端一致,相当于vue的v-model 。*/}
          <Form.Item
            label="姓名"
            name="name"
            rules={[
              {
                required: true,
                message: "请输入姓名",
              },
            ]}
          >
            <Input placeholder="请输入姓名" />
          </Form.Item>

          <Form.Item
            label="年龄"
            name="age"
            rules={[
              {
                required: true,
                message: "请输入年龄",
              },
              {
                type: "number",
                message: "年龄必须是数字",
              },
            ]}
          >
            <InputNumber placeholder="请输入年龄" />
          </Form.Item>
          <Form.Item
            label="性别"
            name="sex"
            rules={[
              {
                required: true,
                message: "请选择性别",
              },
            ]}
          >
            <Select placeholder="请选择性别">
              <Select.Option value="0">男</Select.Option>
              <Select.Option value="1">女</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="出生日期"
            name="birth"
            rules={[
              {
                required: true,
                message: "请选择出生日期",
              },
            ]}
          >
            <DatePicker placeholder="请选择" format="YYYY/MM/DD" />
          </Form.Item>
          <Form.Item
            label="地址"
            name="addr"
            rules={[
              {
                required: true,
                message: "请填写地址",
              },
            ]}
          >
            <Input placeholder="请填写地址" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default User;
